<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>

<link rel="stylesheet" type="text/css" media="screen" href="styles/grid/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/grid/css/ui.jqgrid.css" />
<link rel="stylesheet" href="styles/popup/general.css" type="text/css" media="screen" />
<script src="styles/grid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="styles/grid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="styles/grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="styles/grid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="styles/grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="styles/popup/popup.js" type="text/javascript"></script>
<script type="text/javascript" src="styles/support/indec.js"></script>

<style type="text/css">
	.ui-jqgrid tr.jqgrow td {font-size:0.8em}
	
	.ui-pg-table {font-size:1em}
	.ui-jqgrid-titlebar-close {display: none;}
	
</style>

<script type="text/javascript">
	//var rowsToColor = [];
	var lastSel = 0;
	function load() {
		jQuery("#list").jqGrid(
				{					
					width : '1000',					
					height: '400',					
					url : '<%=request.getContextPath()%>/getJsonGrid?gridName=GET_RC',
					editurl : '<%=request.getContextPath()%>/saveGrid?gridName=GET_RC',
					datatype : "json",
					colNames : [ 'Local','Formulario','Fecha','Observaciones'],
					colModel : [ {
						name : 'Local',
						index : 'Local',
						width : 200,
						sortable: true,
						search: true,
						align: "center"
					}, {
						name : 'Form',
						index : 'Form',
						width : 200,
						sortable: true,
						search: true,
						align: "center"
					}, {
						name : 'Date',
						index : 'Date',
						width : 120,
						sortable: true,
						search: true,
						align: "center"
					}, {
						name : 'Observation',
						index : 'Observation',
						width : 350,
						sortable: true,
						align: 'left',
						editable: true,
						edittype:'textarea', 
						editoptions:{rows:"2",cols:"60"}
					} ],
					rowNum : 10,
					rowList : [ 10, 20, 30],
					imgpath : "includes/css/ui-lightness/images",
					pager : jQuery("#pager"),
					sortable : true,
					loadonce : true,
					viewrecords : true,
					caption : " ", 
					onSelectRow: function(id){ 
						if(id){ 
							jQuery('#list').restoreRow(lastSel);
				         	lastSel=id;
				         	jQuery("#saveBtn,#cancelBtn").attr("disabled",true);
				         	var enabledBtn = jQuery("#enabledBtn").val();
				         	if(enabledBtn == "true")
				         	{
				         		jQuery("#addObsBtn").attr("disabled",false);
				         	}
						}
				   }
					//gridComplete: function () {
		            //    for (var i = 0; i < rowsToColor.length; i++) {
		            //        var status = $("#" + rowsToColor[i]).find("td").eq(1).html();
		            //        if (status == 1) {
		            //            $("#" + rowsToColor[i]).find("td").css("background-color", "#FDFF9E");
		            //        }
		            //        else if (status == 2) {
		            //        	$("#" + rowsToColor[i]).find("td").css("background-color", "#FF0000");
		            //        }
		            //    }
		            // }
				}).navGrid('#pager', {
			edit : false,
			add : false,
			del : false, 
			search:true,
			beforeRefresh: function()
			{
				jQuery("#list").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
			}
		});
		
		jQuery("#addObsBtn").click( function() {
			var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
			if(selectedRow != null)
			{
				var rowData = jQuery("#list").jqGrid('getRowData',selectedRow);
				jQuery("#list").jqGrid('editRow',selectedRow);
				this.disabled = 'true';
				jQuery("#saveBtn,#cancelBtn").attr("disabled",false);									
			}			
		});
		jQuery("#saveBtn").click( function() {
			var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
			if(selectedRow != null)
			{
				jQuery("#list").jqGrid('saveRow',selectedRow);
				jQuery("#saveBtn,#cancelBtn").attr("disabled",true);
				jQuery("#addObsBtn").attr("disabled",false);
			}			
		});
		jQuery("#cancelBtn").click( function() {
			var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
			if(selectedRow != null)
			{
				jQuery("#list").jqGrid('restoreRow',selectedRow);
				jQuery("#saveBtn,#cancelBtn").attr("disabled",true);
				jQuery("#addObsBtn").attr("disabled",false);
			}
		});
	}
	//function rowColorFormatter(cellValue, options, rowObject) {
    //    if (cellValue == 1  || cellValue == 2)
    //        rowsToColor[rowsToColor.length] = options.rowId;
    //    return cellValue;
    //}    
</script>
</head>
<body onload="javascript:load()" >
	<input type="hidden" id="enabledBtn" name="enabledBtn" value="<c:out value='${ATT_ENABLED_BTN}'/>" />
	<h1 style="padding-left: 20px;padding-top: 10px; margin: auto">Rechazos de Encuestas</h1>
	<div style="padding-left: 20px;padding-top: 20px; margin: auto">
		<table id="list" class="scroll"></table>
		<div id="pager" class="scroll" style="text-align:center;"></div>
		<br />
		<input type="button" id="addObsBtn" disabled="disabled" value="Modificar Observación" class="fg-button ui-state-default ui-corner-all"/>
		<input type="button" id="saveBtn" disabled="disabled" value="Guardar" class="fg-button ui-state-default ui-corner-all"/>
		<input type="button" id="cancelBtn" disabled="disabled" value="Cancelar" class="fg-button ui-state-default ui-corner-all"/>
	</div>
</body>
</html>